<template>
  <div>
    <div class="header">
      <span>搜索用户数</span>
      <svg
        t="1671511831045"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1534"
        width="16"
        height="16"
      >
        <path
          d="M512 960c-119.466667 0-230.4-46.933333-315.733333-132.266667S64 631.466667 64 512c0-119.466667 46.933333-230.4 132.266667-315.733333S392.533333 64 512 64c119.466667 0 230.4 46.933333 315.733333 132.266667s132.266667 196.266667 132.266667 315.733333c0 119.466667-46.933333 230.4-132.266667 315.733333s-196.266667 132.266667-315.733333 132.266667z m0-853.333333c-106.666667 0-209.066667 42.666667-285.866667 119.466666C149.333333 302.933333 106.666667 405.333333 106.666667 512s42.666667 209.066667 119.466666 285.866667c76.8 76.8 179.2 119.466667 285.866667 119.466666s209.066667-42.666667 285.866667-119.466666 119.466667-179.2 119.466666-285.866667-42.666667-209.066667-119.466666-285.866667c-76.8-76.8-179.2-119.466667-285.866667-119.466666z"
          p-id="1535"
        ></path>
        <path
          d="M512 234.666667c29.866667 0 51.2 25.6 51.2 51.2S541.866667 341.333333 512 341.333333s-51.2-25.6-51.2-51.2 21.333333-55.466667 51.2-55.466666z"
          p-id="1536"
        ></path>
        <path
          d="M546.133333 725.333333h-42.666666v-277.333333h-21.333334v-42.666667h42.666667c12.8 0 21.333333 8.533333 21.333333 21.333334v298.666666z"
          p-id="1537"
        ></path>
        <path d="M448 704H597.333333v42.666667h-149.333333z" p-id="1538"></path>
      </svg>
    </div>
    <div class="main">
      <span class="main-title">12321</span>
      <span class="main-content">17.1</span>
      <i class="el-icon-caret-top" style="color: rgb(37, 225, 64)"></i>
      <i class="el-icon-caret-bottom" style="color: red"></i>
    </div>
    <div class="footer">
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myCharts = echarts.init(this.$refs.charts);
    myCharts.setOption({
      xAxis: {
        show: false,
        type: "category",
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          type: "line",
          data: [10, 2, 24, 28, 32, 25, 12, 23, 28],
          itemStyle: {
            opacity: 0,
          },
          smooth: true,
          //线条样式
          lineStyle: {
            color: "skyblue",
          },
          //填充颜色
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "skyblue", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
svg {
  vertical-align: middle;
  margin-left: 10px;
}
.main {
  margin: 10px 0;
}
.main-title {
  margin-right: 30px;
  font-size: 25px;
}
.main-content {
  margin-right: 10px;
}
.charts {
  width: 100%;
  height: 100%;
}
.charts {
  width: 100%;
  height: 50px;
}
</style>
